<template>
  <div class="container">
    <el-container>
      <el-header>
        <span class="title">TODO-LIST</span>
        <div class="right">
          <el-popover
              placement="bottom"
              :width="180"
              trigger="click"
          >
            <template #reference>
              <el-button type="text" class="username">用户名：{{username}}</el-button>
            </template>
            <!-- 这里的default必须要写，不知道什么毛病 -->
            <template #default>
              <el-space>
                <el-button size="mini" @click="logout">退出登录</el-button>
                <el-button size="mini" @click="toUserInfo">个人信息</el-button>
              </el-space>
            </template>
          </el-popover>
          <span>待做任务：{{todoCount}}</span>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer>唤起一天明月，照我满怀冰雪，浩荡百川流。鲸饮未吞海，剑气已横秋。</el-footer>
    </el-container>
  </div>

</template>

<script>
import useHeader from '../hooks/HeaderHook'
export default {
  name: "TodoList",
  setup(){

    return {
      ...useHeader()
    }
  }
}
</script>

<style scoped>
.right{
  float: right;
}
.title {
  font-size: 20px;
}
.username {
  margin: 10px;
}


.container{
}

.el-header {
  line-height: 60px;
}

.el-footer {
  text-align: center;
}


.el-main {
  height: calc(100vh - 130px);
}

body > .el-container {
  margin-bottom: 40px;
}

</style>
